<template>
  <div class="app_content_container">
    <Breadcrumb :items="[{ label: BreadcrumbInfo[0], path: BreadcrumbInfo[1] }, name]" />
    <div class="app_content_box">
      <Tabs
        v-model="activeKey"
        style="padding: 0 16px"
        :list="tabList"
        @tabChange="tabChange"
      >
        <ga-tab-pane
          key="network-vpc"
          v-if="(type === 'vmware' && menu === 'host') || menu !== 'host'"
        >
          <template #title>
            <ga-dropdown @select="handleSelect">
              <p>网络({{ obj[curNet] }}) <icon-down /></p>
              <template #content>
                <ga-doption
                  value="network-vpc"
                  style="width: 100px"
                  :style="
                    curNet === 'network-vpc'
                      ? { color: '#0f5ef7', 'background-color': '#f5f5f5' }
                      : {}
                  "
                  >vpc
                </ga-doption>
                <ga-doption
                  :style="
                    curNet === 'network-sub'
                      ? { color: '#0f5ef7', 'background-color': '#f5f5f5' }
                      : {}
                  "
                  value="network-sub"
                >
                  子网
                </ga-doption>
              </template>
            </ga-dropdown>
          </template>
        </ga-tab-pane>
        <!-- <ga-tab-pane key="configuration" v-if="type === 'huaweistack' || type === 'easystack'">
          <template #title>规格配置</template>
        </ga-tab-pane> -->
        <ga-tab-pane key="secure" v-if="menu === 'host'">
          <template #title>安全<ga-badge class="badge_style" :count="6" /></template>
        </ga-tab-pane>
      </Tabs>
      <component :is="componentName" :id="id"></component>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";

const route = useRoute();
const router = useRouter();
const { id } = route.params;
const { name, tab, type, menu } = route.query;
const componentName = ref(null);
const props = defineProps({
  tabList: {
    type: Array,
    default: () => [],
  },
  BreadcrumbInfo: {
    type: Array,
    default: () => [],
  },
});
const activeKey = ref(tab || props.tabList[0]["value"]);
// 加载组件
const loadModule = async (moduleName) => {
  // import 后面是文件路径
  const module = await import(`./${moduleName}/index.vue`);
  componentName.value = module.default;
};
const curNet = ref("network-vpc");
const obj = {
  "network-vpc": "VPC",
  "network-sub": "子网",
};
// 处理方法
const tabChange = (val) => {
  curNet.value = "network-vpc";
  loadModule(val);
  router.replace({
    path: route.fullPath,
    query: { ...route.query, tab: val },
  });
};
// 处理方法
const handleSelect = (val) => {
  curNet.value = val;
  router.replace({
    path: route.fullPath,
    query: { ...route.query, tab: val },
  });
};
onMounted(() => {
  if (tab === "network-sub") {
    activeKey.value = "network-vpc";
    handleSelect(tab);
  }
  loadModule(activeKey.value);
});
</script>

<style lang="scss" scoped>
.badge_style {
  vertical-align: middle;
  margin-left: 8px;
}
:deep(.garco-dropdown-open .garco-icon-down) {
  transform: rotate(180deg);
}
</style>
